<template>
	<view class="container">
		<view class="express" @click="openPop">
			<view class="chose">选择快递公司</view>
			<view class="name" v-if="deliveryName">{{ deliveryName }}</view>
			<view class="name" v-if="!deliveryName">请选择</view>
			<view class="back"><image src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image></view>
		</view>
		<view class="orderNum">
			<view>填写订单号</view>
			<input type="text" v-model="delivery_no" value="" placeholder="填写订单号" />
		</view>
		<view class="orderNum">
			<view>填写联系电话</view>
			<input type="number" v-model="user_phone" value="" placeholder="填写联系电话" />
		</view>
		<view class="tc"></view>
		<view class="btn" @click="submit">
			提交
		</view>
		<!--  ===============================     用户地址弹出框     ===============================  -->
		<u-popup v-model="deliveryFlag" mode='bottom' :closeable="true" border-radius="20">
			<view class="addTitle">
				选择快递
			</view>
			<scroll-view scroll-y="true" style="max-height: 700rpx;min-height:300rpx;padding: 0 30rpx;box-sizing: border-box;">
				<view class="to_address_item" v-if="expressList" v-for="(item, index) in expressList" @click="chose(item.code, item.name)">
					<view class="check_box">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png" v-if="delivery_code != item.code" alt="">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png" v-if="delivery_code == item.code" alt="">
					</view>
					<view class="txt_box over2">{{ item.name }}</view>
				</view>
				<view class="addTitle" v-if="!expressList">暂无数据</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				expressList: [],  // 快递
				delivery_no: '',  // 快递单号
				delivery_code: '', // 快递编码
				deliveryName: '', // 快递名称
				user_phone: '', // 用户手机号
				order_id: '',
				deliveryFlag: false,
			}
		},
		onLoad(option) {
			if (option.orderId) {
				this.order_id = option.orderId
			}
			this.getDelivery()
		},
		methods: {
			//  点击提交
			submit() {
				var that = this
				that.$mrequest({
					url: 'Mini/refund/update',
					method: 'POST',
					data: {
						delivery_no: that.delivery_no,
						delivery_code: that.delivery_code,
						user_phone: that.user_phone,
						order_id: that.order_id
					},
					callBack: function callBack (res) {
						uni.navigateTo({
							url: '/order/return/returnList'
						})
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 选择快递
			chose(code, name) {
				this.deliveryName = name
				this.delivery_code = code
				this.deliveryFlag = false
			},
			// 打开快递弹出框
			openPop() {
				this.deliveryFlag = true
			},
			//  获取快递公司
			getDelivery() {
				var that = this
				that.$mrequest({
					url: 'Seller/expresses',
					method: 'GET',
					callBack: function callBack (res) {
						if (res.code == 200) {
							that.expressList = res.data
							console.log(that.expressList)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background: rgba(247, 246, 249, 1);
	}
	.express{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 118rpx;
		border-top: 1rpx solid #BBBBBB;
		border-bottom: 1rpx solid #BBBBBB;
		padding: 0 30rpx;
		
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		background-color: #FFFFFF;
		.name{
			flex: 1;
			text-align: right;
		}
		.back{
			width: 21rpx;
			height: 21rpx;
			margin-left: 34rpx;
			&>image{
				display: block;
				height: 100%;
				width: 100%;
			}
		}
	}
	.orderNum{
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 142rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		border-bottom: 1rpx solid #BBBBBB;
		&>view{
			margin-bottom: 20rpx;
		}
	}
	.tc{
		height: 50rpx;
		width: 100%;
		background-color: #fff;
	}
	.btn{
		height: 90rpx;
		margin: 250rpx 30rpx 0rpx;
		background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
		border-radius: 45rpx;
		line-height: 90rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}
	.addTitle{
		position: relative;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		margin: 20rpx 0;
		.new{
			position: absolute;
			left: 30rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.to_address_item {
		margin-bottom: 50rpx;
		width: 100%;
		height: 66rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		
		.check_box {
			flex-shrink: 0;
			width: 32rpx;
			height: 32rpx;
			position: relative;
			margin-right: 26rpx;
		
			img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
		.txt_box {
			font-size: 26rpx;
			font-weight: blod;
		}
	}
</style>
